import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";
const LeftTop: React.FC = () => {
  const chartRef = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
    if (chartRef.current) {
      const chartInstance = echarts.init(chartRef.current);
      const option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2",
            "4",
            "6",
            "8",
            "10",
            "12",
            "14",
            "16",
            "18",
            "20",
            "22",
            "24",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [
              820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290,
            ],
            type: "line",
            areaStyle: {},
          },
        ],
      };
      chartInstance.setOption(option);
      window.addEventListener("resize", () => {
        chartInstance.resize();
      });
      return () => {
        window.removeEventListener("resize", () => {
          chartInstance.resize();
        });
        chartInstance.dispose();
      };
    }
  }, []);
  return <div ref={chartRef} style={{ width: "109%", height: "120%" }}></div>;
};
export default LeftTop;
